<style lang="scss" scoped>
.login-container {
  height: 100%;
  box-sizing: border-box;
  background-size: 100% 100%;
  color: #fff;
  .bgu {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .login-box {
    position: absolute;
    z-index: 99;
    width: 86%;
    background-color: RGBA(10, 33, 62, 0.5);
    border-radius: 10px;
    margin: 100px 7% 50px;
    padding: 30px;
    padding-left: 20px;
    box-sizing: border-box;
    .login-text {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      margin-bottom: 30px;
      .text_border {
        margin: 10px auto;
        width: 30%;
        height: 3px;
        background-color: #36adc1;
      }
    }
    .login-btn {
      font-size: 15px;
      margin-top: 20px;
      height: 38px;
      line-height: 38px;
      width: 100%;
      color: #fff;
      background: #36adc1;
    }
  }
  .bgu-logo {
    position: absolute;
    z-index: 9;
    bottom: 50px;
    width: 30%;
    left: 50%;
    margin-left: -25px;
    height: 50px;
    width: 50px;
  }
}
</style>

<template>
  <view class="login-container">
    <img class="bgu" src="../static/bgu.jpg" alt />
    <div class="login-box">
      <div class="login-text">
        云卫教育服务平台
        <div class="text_border"></div>
      </div>
      <div class="login-info" style="text-indent: 2em">
        安徽云卫文化传播有限公司自1993年成立以来，以主营医药卫生教材、数字化产品、课程培训、教学设备、图书为主的一家公司公司下属合肥医学书店（yunweits.tmall.com）主营医药卫生图书已26年，现是人民卫生出版社在安徽省唯一经销服务代理中心，2018年我公司被人民卫生出版社评为全国十大优秀经销商，并与蚌埠医学院、安徽医科大学、皖南医学院、安徽医学高等专科学院、安徽卫生健康职业学院、皖西职业卫生学院、合肥职业技术学院、阜阳职业技术学院等众多高校有长期稳定业务关系。
      </div>
      <button @click="getUserInfo" class="login-btn" open-type="getUserInfo">
        授权登录
      </button>
    </div>
    <img class="bgu-logo" src="../static/logo.jpg" alt />
  </view>
</template>

<script>
import * as api from '../common/api.js'
export default {
  data() {
    return {}
  },
  onLoad() {
    // wx.login({
    //   async success(res) {
    //     wx.showLoading({ title: '登录中...' })
    //     try {
    //       console.log(res.code)
    //       const token = await api.login({ code: res.code })
    //       wx.setStorageSync('token', token.accessToken)
    //       wx.setStorageSync('openId', token.openId)
    //       if (token.role) {
    //         wx.switchTab({
    //           url: `/pages/Home/Home`
    //         })
    //       } else {
    //         wx.redirectTo({
    //           url: `/pages/User/UserInfo`
    //         })
    //       }
    //     } catch (e) {
    //       console.log(e)
    //       wx.showModal({
    //         title: '授权失败',
    //         content: '请检查网络',
    //         showCancel: false,
    //         confirmText: '确定'
    //       })
    //     } finally {
    //       wx.hideLoading()
    //     }
    //   }
    // })
  },
  methods: {
    getUserInfo() {
      wx.login({
        async success(res) {
          wx.showLoading({ title: '授权登录中...' })
          try {
            const token = await api.login({ code: res.code })
            wx.setStorageSync('token', token.accessToken)
            wx.setStorageSync('openId', token.openId)
            if (token.role) {
              wx.switchTab({
                url: `/pages/Home/Home`
              })
            } else {
              wx.redirectTo({
                url: `/pages/User/UserInfo`
              })
            }
          } catch (e) {
            console.log(e)
            wx.showModal({
              title: '授权失败',
              content: '请再次尝试',
              showCancel: false,
              confirmText: '确定'
            })
          } finally {
            wx.hideLoading()
          }
        }
      })
    }
  }
}
</script>
